$(document).ready(function () {
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});

// function appendText()
// {
//   var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
//   var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
//   var txt3=document.createElement("p");
//   txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
//   $("body").append(txt1,txt2,txt3);        // 追加新元素
// }

// $(document).ready(function () {
  // $("#btn1").click(function(){
  //   $("p").append("<b>Appended text</b>.");
  //   $("p").prepend("<b>Prepended text</b>>")
  // });
  // $("#btn2").click(function(){
  //   $("ol").append("<li>Appended item</li>.");
  //   $("ol").prepend("<li>Prepended item</li>.");
  // });

  // $("button").click(function(){
  //   $("#w3s").attr("href", function(i,origValue){
  //     return origValue + "/jquery";
  //   });
  // });

  // $("#w3s").attr({
    //   "href" : "http://www.w3school.com.cn/jquery/",
    //   "title" : "W3School jQuery 教程"
    // });
  // });

  // $("#btn1").click(function (){
  //   $("#test1").text(function (i,origText){
  //     return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
  //   });
  // });
  // $("#btn2").click(function(){
  //   $("#test2").html(function(i,origText){
  //     return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
  //   });
  // });


  // $("#btn1").click(function (){
  //   $("#test1").text("Hello World!");
  // });
  // $("#btn2").click(function (){
  //   $("#test2").html("<b>Hello World!</b>");
  // });
  // $("#btn3").click(function (){
  //   $("#test3").val("Dolly Duck");
  // });


  // $("button").click(function (){
  //   // alert("Value:"+$("#test").val());
  //   alert($("#w3s").attr("href"));
  // });

  // $("#btn1").click(function(){
  //   alert("Text:"+$("#test").text());
  // });
  // $("#btn2").click(function (){
  //   alert("HTML:"+$("#test").html());
  // });
  // $("button").click(function (){
  //   $("#p1").css("color","red")
  //     .slideUp(2000)
  //     .slideDown(2000);
  // });

  // $("button").click(function (){
  //   $("p").hide(1000,function (){
  //     alert("The paragraph is now hidden!");
  //   });
  // });

  // $("#flip").click(function(){
  //   $("#panel").slideDown(500);
  // });
  // $("#stop").click(function (){
  //   $("#panel").stop();
  // });

  // $("button").click(function () {
  //   // 预定义动画
  //   var div = $("div");
  //   div.animate({left:'100px'},"slow");
  //   div.animate({fontSize:'3em'},"slow");
    // div.animate({height: '300px', opacity: '0.4'}, "slow");
    // div.animate({width: '300px', opacity: '0.8'}, "slow");
    // div.animate({height: '100px', opacity: '0.4'}, "slow");
    // div.animate({width: '100px', opacity: '0.8'}, "slow");
    // $("div").animate({
    //   height:'toggle',
    //   // left:'250px',
    //   // // opacity:'0.5',
    //   // height:'+=150px',
    //   // width:'+=150px'
    // });
  // });
  // $(".flip").click(function(){
  // 切换 显示隐藏
  // $(".panel").slideToggle("slow");
  // 向上滑动
  // $(".panel").slideUp("slow");
  // 向下滑动
  // $(".panel").slideDown("slow");
  // });
  // $("button").click(function(){
  // 切换
  // $("p").toggle(100);
  // 淡入
  // $("#div1").fadeIn();
  // $("#div2").fadeIn("slow");
  // $("#div3").fadeIn(3000);
  // 淡出
  // $("#div1").fadeOut();
  // $("#div2").fadeOut("slow");
  // $("#div3").fadeOut(3000);
  // 切换隐藏显示
  // $("#div1").fadeToggle();
  // $("#div2").fadeToggle("slow");
  // $("#div3").fadeToggle(3000);
  // 透明度
  // $("#div1").fadeTo("slow",0.15);
  // $("#div2").fadeTo("slow",0.4);
  // $("#div3").fadeTo("slow",0.7);
  // 下拉显示
  // });
  // 直接显示隐藏
  // $("#hide").click(function(){
  //   $("p").hide(1000);
  // });
  // $("#show").click(function (){
  //   $("p").show(1000);
  // });
  // $("button").click(function () {
  //   // 将所有的p 元素改变背景颜色为红色
  //   $("p").css("background-color", "red");
  // });
// });
